const webpack = require('webpack') //访问内置的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
const DefinePlugin = require('webpack/lib/DefinePlugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BuildProcess = require('./build/build.process.js')
var ExtractTextPlugin = require("extract-text-webpack-plugin")
const VueLoaderPlugin = require('vue-loader-plugin');


const getEntry = () => {
  return {
    app1: './application/app1/main.js',
    app2: './application/app2/main.js',
    app3: [path.resolve(__dirname, './application/app3/polyfills.ts'),'./application/app3/main.ts'],
    app4: './application/app4/main.js'
  }
}

const cdn = {
  js: ['https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js']
}

const path = require('path');

const HtmlWebpackPluginCommonConif = {
  minify: {
    removeComments: true,//清除注释
    // collapseWhitespace:true//清理空格
  },
  inject: "body",
  cdn
}


function recursiveIssuer(m, c) {
  const issuer = c.moduleGraph.getIssuer(m);
  // For webpack@4 issuer = m.issuer

  if (issuer) {
    return recursiveIssuer(issuer, c);
  }

  const chunks = c.chunkGraph.getModuleChunks(m);
  // For webpack@4 chunks = m._chunks

  for (const chunk of chunks) {
    return chunk.name;
  }

  return false;
}

module.exports = {
  entry: getEntry(),
  target: 'web',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js'
  },
  resolve: {
    extensions: ['.js', '.ts', '.vue', 'jsx'],
    alias: {
      "@": path.resolve(__dirname, "src"),
      "@app1": path.resolve(__dirname, "application/app1"),
      "@app2": path.resolve(__dirname, "application/app2"),
    }
  },
  externals: {
    jquery: 'jQuery',
  },
  devtool: 'source-map',
  plugins: [
    new CleanWebpackPlugin(),
    // new BuildProcess(),
    new webpack.ProgressPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
    // new ExtractTextPlugin("style.css"),
    new HtmlWebpackPlugin({
      template: './application/index.html',
      filename: 'index.html',
      ...HtmlWebpackPluginCommonConif,
      inject: false
    }),
    new HtmlWebpackPlugin({
      template: './application/app1/index.html',
      filename: 'app1.html',
      title: 'Vue',
      chunks: ["app1"],
      ...HtmlWebpackPluginCommonConif
    }),
    new HtmlWebpackPlugin({
      template: './application/app2/index.html',
      filename: 'app2.html',
      title: 'React',
      chunks: ["app2"],
      ...HtmlWebpackPluginCommonConif
    }),

    new HtmlWebpackPlugin({
      template: './application/app3/index.html',
      filename: 'app3.html',
      title: 'Angular',
      chunks: ["app3"],
      ...HtmlWebpackPluginCommonConif
    }),

    new HtmlWebpackPlugin({
      template: './application/app4/index.html',
      filename: 'app4.html',
      title: 'Jquery',
      chunks: ["app4"],
      ...HtmlWebpackPluginCommonConif
    }),

    // 将 tsconfig 中配置的路径别名映射到 webpack.resolve.alias 上
    // 在 .vue 文件中可以通过诸如 @/components/xxx.vue 的形式来引入组件
    // new TsconfigPathsPlugin(),
    new VueLoaderPlugin(),
    new DefinePlugin({
      'isDevServer': 'false',
      // 'isDevServer': 'true',
      'ENV': JSON.stringify(process.env.NODE_ENV)
    }),
  ],
  optimization: {
    // 分割代码块
    splitChunks: {
      cacheGroups: {
        // commons: {
        //   name: 'commons',
        //   chunks: 'initial',
        //   minChunks: 2,
        // },
        vendors: {
          test: /[\\/]node_modules[\\/](vue|lodash|vue-router)[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [{
          loader: 'vue-loader',
          options: {
            // extractCSS: true
          }
        }],

      },
      {
        test: /\.html$/,
        use: [{loader: 'html-loader'}],
        include: path.resolve(__dirname, './application/app3/app'),
        // exclude: [
        //   path.resolve(__dirname, './application/app1/index.html'),
        //   path.resolve(__dirname, './application/app2/index.html'),
        //   path.resolve(__dirname, './application/app3/index.html'),
        //   path.resolve(__dirname, './application/app4/index.html')
        // ],
        enforce: 'post'
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',

          },
          // {
          //   loader: '@angular-devkit/build-optimizer/webpack-loader',
          //   options: {
          //     sourceMap: false
          //   }
          // }
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.(tsx|ts)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader',

          }
        ]
      },
      {
        test: /\.jsx?$/, // jsx/js文件的正则
        exclude: /node_modules/, // 排除 node_modules 文件夹
        use: {
          // loader 是 babel
          loader: 'babel-loader',
          options: {
            // babel 转义的配置选项
            babelrc: false,
            presets: [
              // 添加 preset-react
              require.resolve('@babel/preset-react'),
              // [
              //   require.resolve('@babel/preset-env'),
              //   // {modules: false}
              // ]
            ],
            // cacheDirectory: true
          }
        }
      },
      {
        test: /\.css$/,
        include: path.join(__dirname, 'application/app3/app'),
        use: [
          {loader: 'raw-loader'},
          {loader: 'css-loader'}
        ]
      },
      {
        test: /\.(css|scss|sass)$/,
        use: [
          MiniCssExtractPlugin.loader,//loader取代style.loader,作用，提取js中的css文件,并且注入到html中
          {loader: 'css-loader'},
          {loader: 'sass-loader', options: {implementation: require('dart-sass')}}
        ]
      },
    ]
  },
  watchOptions: {
    ignored: /node_modules/
  },
  devServer: {
    contentBase: false,
    hot: true,
    open: true,
    compress: true,
    overlay: true,
    port: 9100,
  },
};
